<template>
  <TablePage>
    <template #top>
      <SearchForm
        title="考勤报表"
        :keyword-search-data="[{ key: 'tollCollector', label: '收费员名称' }]"
        :select-data="selectData"
        @search="search"
      >
      </SearchForm>
    </template>
    <SlTable
      :columns="columns"
      row-key="clockInTime"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex === 'oper'">
          <a-image
            :width="0"
            :style="{ display: 'none' }"
            :preview="{
              visible: maxImgVisible,
              onVisibleChange: setMaxImgVisible,
            }"
            :src="record.face"
          />
          <a href="javascript:void(0)" @click="setMaxImgVisible(true)">查看</a>
        </div>
      </template>
    </SlTable>
  </TablePage>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { downloadFile, handleDateRowRender } from "/@/utils/common";
import { FormItemComponentType, CURDAction } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import type { ServiceReportItem, PartialServiceReportItem, AttendanceItem } from "/@/api/main/statisticalReport/models";
import { Api } from "/@/api/main/statisticalReport";
import { exportReq } from "/@/api/common";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";
import { LabelSelectType, SelectItem } from "/@/types/components";
import { Api as csApi } from "/@/api/main/civilizedService";
import { TollBoothItem } from "/@/api/main/civilizedService/models";
import Dayjs from "dayjs";

const { t } = useI18n();
const columns = ref<TableProps<AttendanceItem>["columns"]>([
  {
    title: "收费员名称",
    dataIndex: "tollCollector",
  },
  {
    title: "工号",
    dataIndex: "jobNo",
  },
  {
    title: "收费岗亭",
    dataIndex: "tollBooth",
  },
  {
    title: "打卡类型",
    dataIndex: "clockInType",
  },
  {
    title: "打卡时间",
    dataIndex: "clockInTime",
    customRender({ text }) {
      return Dayjs(text * 1000).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  {
    title: "操作",
    dataIndex: "oper",
  },
]);
function search(model) {
  if (model.dateRange) {
    let start = model.dateRange[0];
    let end = model.dateRange[1];
    start = start.split(" ")[0] + " 00:00:00";
    end = end.split(" ")[0] + " 23:59:59";
    model.startDate = start;
    model.endDate = end;
    delete model.dateRange;
  } else if (model.dateRange === null) {
    model.startDate = null;
    model.endDate = null;
  }
  // console.log(model);
  reloadTable({ model });
}

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<AttendanceItem>({
  getPageUrl: Api.attendanceRecords,
});

const selectData = ref<SelectItem[]>([
  {
    label: "打卡时间",
    key: "dateRange",
    selectType: LabelSelectType.rangePicker,
    props: {
      // showTime: {
      //   format: "HH:mm:ss",
      // },
      showTime: false,
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD",
    },
  },
  {
    label: "岗亭",
    key: "tollBoothId",
    options: [],
    props: {},
  },
]);

const { tableData: tollBoothData, reloadTable: reloadTollBoothData } = useCURD<TollBoothItem>({
  getPageUrl: csApi.tollBooths,
  pageSize: 999,
  loadOnMounted: false,
});
onMounted(async () => {
  const props = selectData.value[1].props;
  if (props) {
    props.loading = true;
    await reloadTollBoothData();
    props.loading = false;
    selectData.value[1].options = [{ label: "所有", value: "" }].concat(
      tollBoothData.value.map((el) => ({
        label: el.tollBooth,
        value: el.id,
      }))
    );
  }
});

const maxImgVisible = ref(false);
function setMaxImgVisible(v) {
  maxImgVisible.value = v;
}
</script>
